<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>form-vue</title>
		<script src="../assets/js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 指令v-on，绑定表单控件的事件，
			v-model，实现表单输入和应用状态之间的双向绑定 -->
			<button v-on:click="reverseMessage">反转消息</button>
			<p>{{message}}</p>
			<input type="text" v-model="text" />
			<p>{{text}}</p>
			<textarea v-model="textareaVal" placeholder="multiple lines "></textarea>
			<p style="white-space: pre-line;">textarea:{{textareaVal}}</p>
			<!-- 单选按钮和多选按钮可以添加默认值 -->
			<div style="margin-top: 1.25rem;">
				<input type="checkbox" id="java" value="java" v-model="checkboxVal" />
				<label for="java">java</label>
				<input type="checkbox" id="c#" value="c#" v-model="checkboxVal" />
				<label for="c#">c#</label>
				<input type="checkbox" id="vue" value="vue" v-model="checkboxVal" />
				<label for="vue">vue</label>
				<p>checkboxVal:{{checkboxVal}}</p>
			</div>
			<div style="margin-top: 1.25rem;">
				<input type="radio" id="one" value="one" v-model="radioVal" />
				<label for="one">one</label>
				<input type="radio" id="two" value="two" v-model="radioVal" />
				<label for="two">two</label>
				<p>radioVal:{{radioVal}}</p>
			</div>
			<div style="margin-top: 1.25rem;margin-bottom: 1.25rem;">
				<select id="select" v-model="selectVal">
					<option selected value="">请选择</option>
					<option value="a">A</option>
					<option value="b">B</option>
					<option value="c">C</option>
				</select>
				<p>{{selectVal}}</p>
			</div>
			<div style="margin-bottom: 1.25rem;">
				<select multiple v-model="multipleSelectVal">
					<option value="">请选择</option>
					<option value="1">111</option>
					<option value="2">222</option>
					<option value="3">333</option>
				</select>
				<p>{{multipleSelectVal}}</p>
			</div>
			<button v-on:click="submit">提交</button>
			<div v-on:click="click1">
				<!-- .stop是事件修饰符，表示click事件不会向上传递，仅执行click2 -->
				<div @click.stop="click2">v-on（@）:click</div>
			</div>
		</div>
		<script src="../assets/js/form.js"></script>
	</body>
</html>
